<template>
  <div class="scoring-board">
    <van-nav-bar :placeholder="true" fixed title="打分看板" left-arrow @click-left="backBtn" />
    <div class="scoring-board-content">
      <div class="scoring-board-title">
        <div class="title-content">
          <h4>{{ queryInfo.name }}</h4>
          <div class="score-info">
            <p>{{ queryInfo.activityTitle }}</p>
            <p>{{queryInfo.ticketName}}</p>
            <p>更新时间：{{ time }}</p>
          </div>
        </div>
        <div class="user-avatar">
          <van-image round width="1rem" height="1rem" :src="queryInfo.sponsorAvatar" />
          <div>{{ queryInfo.sponsorName }}</div>
        </div>
      </div>
      
      <div class="scoring-board-com">
        <!-- 这里写页面 -->
        <!-- 晋级表 -->
        <PromotionPage @showPromotion="showPromotion" v-if="!isPromotion"></PromotionPage>
        <PromotionTable v-else></PromotionTable>
      </div>
    </div>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import PromotionPage from './com/PromotionPage.vue'
import PromotionTable from './com/PromotionTable.vue'

export default {
  name: "scoringBoard",
  data() {
    return {
      isPromotion:false,
      time: this.$dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
    };
  },
  computed:{
    queryInfo(){
      return this.$route.query
    }
  },
  components: { PromotionPage ,PromotionTable},
  methods: {
    showPromotion(val){
      this.isPromotion = val
    },
    backBtn(){
      if(this.isPromotion){
        this.isPromotion = false
        return 
      }
      this.$router.go(-1)
    }
  },
  async created() { },
};
</script>

<style lang="less" scoped>
.scoring-board {
  width: 100%;
  height: 100%;

  .scoring-board-content {
    width: 100%;
    height: calc(100% - 1rem);

    .scoring-board-title {
      width: 100%;
      height: 3.5rem;
      background: url("@/assets/board-bgi.jpeg") 100% 100% no-repeat;
      background-size: 100% 100%;
      display: flex;
      justify-content: space-between;
      padding: .5rem .4rem 0;
      color: #fff;
      align-items: center;

      .title-content {
        padding-top: .5rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        h4 {
          font-size: 0.5rem;
          margin-bottom: .3rem;
        }

        .score-info {
          p {
            font-size: 0.25rem;
            margin-bottom: .2rem;
            color: rgba(255, 255, 255, .8);
          }
        }

      }

      .user-avatar {
        text-align: center;
        font-size: 0.3rem;
      }
    }

    .scoring-board-com {
      width: 100%;
      height: calc(100% - 3.5rem);
    }
  }
}

</style>
